<template>
  <div class="login-page">
    <navigation-bar pageName="登录"
                    @onLeftClick='onLeftClick'>
    </navigation-bar>
    <div class="login-page-content">
      <div class="input-container">
        <input type="text"
               v-model="username"
               placeholder="用户名">
      </div>
      <div class="input-container">
        <input type="password"
               v-model="password"
               placeholder="密码">
      </div>
      <div class="login-page-content-login page-commit"
           @click="onLoginClick">登录
      </div>
      <div class="login-page-content-registered"
           @click="onRegisteredClick">注册新用户</div>
    </div>
  </div>
</template>
<script>
import NavigationBar from '@c/currency/NavigationBar.vue'
export default {
  name: 'login',
  data () {
    return {
      username: '',
      password: ''
    }
  },
  components: {
    NavigationBar
  },
  methods: {
    onLeftClick () {
      this.$router.go(-1)
    },
    onLoginClick () {
      if (this.username.length !== 0 && this.password.length !== 0) {

      } else {
        alert('请输入用户名或密码')
      }
    },
    onRegisteredClick () {
      this.$router.push({
        name: 'registered',
        params: {
          routerType: 'push'
        }
      })
    }
  }
}
</script>
<style scoped lang = 'scss'>
@import "@css/style.scss";
@import "@css/variable.scss";
.login-page {
  position: absolute;
  height: 100%;
  width: 100%;
  background: white;
  &-content {
    height: 100%;
    width: 100%;
    &-login {
      margin-top: px2rem(40);
    }
    &-registered {
      font-size: px2rem($infoSize);
      text-align: right;
      color: $hintColor;
      margin-top: px2rem($marginSize);
      padding: px2rem($marginSize);
    }
  }
}
</style>